<template>
  <div class="pad5">
    <mu-card class="pad10">
      <title-a>退库</title-a>
    </mu-card>
    <div class="mart5">
      <div class="bcf round3 ofh pad5 shadow1">
        <title-a>出库单查询</title-a>
        <div class="" :key="searchBoxReset">
          <EzData v-model="searchBox" :config="searchBoxConfig"></EzData>
        </div>
        <div class="padb5">
          <mu-button color="primary" @click="getList(1)">
            <mu-icon value="search"/>
            <span class="padlr9">查询</span>
          </mu-button>
          <mu-button class="marl10" @click="resetSearchBox()">
            <mu-icon value="repeat"/>
            <span class="padlr9">重置</span>
          </mu-button>
        </div>
      </div>
      <div class="flex-r flex-start mart5 flex-fill">
        <div class="bcf pad5" style="width: 400px;">
          <title-a>退库信息</title-a>
          <EzData :config="inConfig" v-model="model" :key="reloadKey"></EzData>
          <div class="padl60">
            <mu-button color="primary" @click="submit">退库</mu-button>
          </div>
        </div>
        <div class="flex1 marl5 bcf round3 pad5">
          <title-a>出库单列表</title-a>
          <!--                    右侧占位 右侧显示该物品的近期入库记录-->
          <div v-show="outLogs.length === 0" class="mar10 pad10 tac bdda bc13">
            <div>选择需要入库的项目或者筛选出库记录后，查看近期出库情况明细</div>
          </div>
          <div class="pad5 bc13 mart5" v-show="outLogs.length > 0">
            <div class="mar5 bcf lh2">
              <div style="max-height: 400px;overflow-y: scroll">
                <div class="flrc pad5">
                  <div class="flex2">名称</div>
                  <div class="flex1">数量</div>
                  <div class="flex1">可退数量</div>
                  <div class="flex1">单号</div>
                  <div class="flex1">批次</div>
                  <div class="flex1">堆号</div>
                  <div class="flex1">库位</div>
                  <div class="flex1">申请人</div>
                  <div class="flex2">出库时间</div>
                </div>
                <div v-for="item in outLogs" :key="item.id">
                  <div class="flrc pad5 bdda pointer" @click="setCurRow(item)">
                    <div>
                      <mu-radio v-model="item.selected" :value="true"></mu-radio>
                    </div>
                    <div class="flex2">{{ item.item.text }}</div>
                    <div class="flex1">{{ item.num }}</div>
                    <div class="flex1">{{ item.numCanBack }}</div>
                    <div class="flex1">{{ item.sn }}</div>
                    <div class="flex1">{{ item.heapCode }}</div>
                    <div class="flex1">{{ !item.batchCode ? '-' : item.batchCode }}</div>
                    <div class="flex1">{{ item.pos }}</div>
                    <div class="flex1">{{ item.applier }}</div>
                    <div class="flex2">
                      {{ $utils.getDateTime(item.createAt) }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import config from "../OutLog/list";
import EzData from "@/comps/EzData";
import EzItemPicker from "@/pages/v1/wms/componets/EzItemPicker";
import formBuilder from "@/comps/form/formBuilder";
import TitleA from "@/comps/comm/TitleA";
import apiOutLog from "@/pages/v1/wms/OutLog/js/apiOutLog";

export default {
  name: "in_cancel",
  components: {TitleA, EzItemPicker, EzData},
  data() {
    let fb = formBuilder().setLabelWidth(60).setLabelPosition('right')
    fb.addText('item.text__regex').setSpan(2).setLabel('物品')
    fb.addText('sn__regex').setSpan(2).setLabel('单号')
    fb.addText('batchCode__regex').setSpan(2).setLabel('批次号')
    fb.addText('heapCode__regex').setSpan(2).setLabel('堆号')
    fb.addText('pos__regex').setSpan(2).setLabel('库位')

    let inForm = formBuilder().setLabelWidth(60).setLabelPosition('right')
    inForm.addText("num").setSpan(12).setLabel("数量").setTypeNumber()
    inForm.addText("note").setSpan(12).setLabel("原因").setMulti(true).setRows(3)
    inForm.addText("applier").setSpan(6).setLabel("经办人")
    inForm.addText("pos").setSpan(6).setLabel("入库位")

    return {
      outType: 0,//0=没出库单号相关信息，1=有出库单号相关信息

      searchBox: {},
      searchBoxConfig: fb,
      searchBoxReset: 0,

      outLogs: [],
      reloadKey: "",
      list: {
        page: 0,
        limit: 10,
        total: 0,
      },

      itemInfo: {
        base: [],
        log: []
      },
      model: {itemId: 0},
      inConfig: inForm,
    }
  },
  mounted() {
  },
  methods: {
    resetSearchBox() {
      this.searchBox = {}
      config.searchBoxData = this.searchBox
      this.searchBoxReset = Math.random()
    },
    setSearchBox(v) {
      this.searchBox = {}
      this.searchBoxConfig.items = v
      this.searchBoxReset = Math.random()
    },
    setCurRow(row) {
      for (let item of this.outLogs) {
        item.selected = item.id === row.id
      }
      this.model["outLogId"] = row.id
      this.model["pos"] = row.pos
      this.model["num"] = row.num
      this.model["applier"] = row.applier
      this.reloadKey = Math.random()
    },

    setPageSize(size) {
      this.list.limit = size
      this.getList()
    },
    getList(page) {
      if (page === undefined) {
        page = this.list.page
      }
      apiOutLog.findBy({
        _where: {...this.searchBox, isCanceled: false, numCanBack__ne: 0},
        _dumps: ["item", "type", "unit"],
        page: page,
        limit: this.list.limit
      }, res => {
        this.outLogs = res.data.lists
        this.list = res.data.query
      })
    },
    submit() {
      this.$http.post("/wms/admin/OutLog/out_back", this.model, res => {
        if (res.code === 2001) {
          this.$toast.success("操作成功")
          this.getList()
        }
      })

    }
  },
  watch: {
    "model.itemId"(v) {
      if (v > 0) {
        this.searchBox = {
          itemId: v
        }
        this.getList(1)
      }
    },
    outType() {
      this.model.outLogId = 0
      this.model.itemId = 0
      if (this.outType === 1) {
        this.searchBox = {}
      }
      this.searchBoxReset = Math.random()
    }
  }
}
</script>

<style scoped>

</style>